<template>
	<div style="position: relative">
		<div id="china22"></div>
		<div class="botdiv" v-if="stationlefttopdata">
			<div class="aaasd">
			</div>
			<a-card title="概况" style="width: 60vw">
				<template #extra><a style="curpo" @click="goUrl">全景监控</a></template>
				<p v-if="stationlefttopdata.newWarnInfo" style="text-align: center">最新预警（{{ stationlefttopdata.newWarnInfo.warnCnName }} I {{ stationlefttopdata.newWarnInfo.stakeName }} 桩 I {{ stationlefttopdata.newWarnInfo.createTime }} ）</p>
				<div style="display: flex; justify-content: space-around">
					<div style="width: 50%">
					<a-descriptions title="站详情" size="small" layout="vertical" bordered >
							<a-descriptions-item label="充电站名称">{{ stationlefttopdata.baseStationInfo.stationName }}</a-descriptions-item>
							<a-descriptions-item label="充电站地址">{{ stationlefttopdata.baseStationInfo.stationAddr }}</a-descriptions-item>
							<a-descriptions-item label="所属省份"> {{ stationlefttopdata.baseStationInfo.province }}</a-descriptions-item>
							<a-descriptions-item label="所属运营商"> {{ stationlefttopdata.baseStationInfo.operatorId }}</a-descriptions-item>
							<a-descriptions-item label="联系电话"> {{ stationlefttopdata.baseStationInfo.contactPhone }}</a-descriptions-item>
							<a-descriptions-item label="直流桩数"> {{ stationlefttopdata.baseStationInfo.dcChargers }}</a-descriptions-item>
							<a-descriptions-item label="交流桩数"> {{ stationlefttopdata.baseStationInfo.acChargers }}</a-descriptions-item>
							<a-descriptions-item label="装机功率（千瓦）"> {{ stationlefttopdata.baseStationInfo.totalPower }}</a-descriptions-item>
						</a-descriptions>
					</div>
					<div style="45%" v-if="stationlefttopdata.chargingInfo && stationlefttopdata.chargingInfo.length > 0">
						<a-descriptions title="桩详情" size="small" layout="vertical" bordered>
							<a-descriptions-item label="桩名称"> {{ stationlefttopdata.chargingInfo[0].stakeName }}</a-descriptions-item>
							<a-descriptions-item label="VIN"> {{ stationlefttopdata.chargingInfo[0].avin }}</a-descriptions-item>
							<a-descriptions-item label="实时充电功率   "> {{ stationlefttopdata.chargingInfo[0].address }}</a-descriptions-item>
							<a-descriptions-item label="目标充电量（soc)   "> {{ stationlefttopdata.chargingInfo[0].asoc }}</a-descriptions-item>
							<a-descriptions-item label="实时充电功率   "> {{ stationlefttopdata.chargingInfo[0].aRealtimePower }}</a-descriptions-item>
							<a-descriptions-item label="实时充电电量"> {{ stationlefttopdata.chargingInfo[0].aRealtimeCapacity }}</a-descriptions-item>
						</a-descriptions>
					</div>
				</div>
			</a-card>
		</div>
		<div class="left_float">
			<a-input-search v-model:value="stationNamevalue" placeholder="搜索充电站" @search="onSearch" />
			<div class="seletDetails" v-if="stationlefttopdata">
				<p class="p1">站名：{{ stationlefttopdata.baseStationInfo.stationName || '' }}</p>
				<p class="p1">地址：{{ stationlefttopdata.baseStationInfo.stationAddr || '' }}</p>

				<div>
					<a-tag color="#2db7f5">城市公共</a-tag>
					<a-tag color="#87d068">运营</a-tag>
				</div>
				<div class="seletDetails2">
					<img src="/@/assets/images/panoramicMonitoring/soc.png" alt="" />

					<div class="seletDetails22">
						<p>充电中</p>
						<p class="details22p2">{{ stationlefttopdata.chargeStakeNum }}辆</p>
					</div>
					<div class="seletDetails22">
						<p>今日充电量</p>
						<p class="details22p2">{{ stationlefttopdata.todayTotalCapacity }}度</p>
					</div>
					<div class="seletDetails22">
						<p>今日预警</p>
						<p class="details22p3">{{ stationlefttopdata.todayAlterNum }}个</p>
					</div>
				</div>
				<div class="btmtongji">
					<a-radio v-model:checked="checked">月</a-radio>
					<a-date-picker style="width: 100px" v-model:value="valueCharge" picker="month" valueFormat="YYYY-MM" @change="dateselect2" />
					<div class="seletDetails2" v-if="stationlefttopalldata">
						<div class="seletDetails22">
							<p>充电量</p>
							<p class="details22p2">{{ stationlefttopalldata.chargeCapacity }}</p>
						</div>
						<div class="seletDetails22">
							<p>充电次数</p>
							<p class="details22p2">{{ stationlefttopalldata.chargeTimes }}</p>
						</div>
						<div class="seletDetails22">
							<p>充电时长</p>
							<p class="details22p3">{{ stationlefttopalldata.chargeTimeLength || 0 }}</p>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script lang="js">
	// import * as echarts from 'echarts';
	import chinamap from './china.json';
	import {stationMonitorstake, getgps, chargeMapsearch, chargeMapgetStationById, getStationAnalysis} from '@/api/screen/yewuapi.js';

	export default {
		name: 'ctditu',
		data() {
			return {
				checked: true,
				radiovalue: 'month',
				valueCharge: '',
				stationlefttopdata: null,
				stationlefttopalldata: null,
				stationNamevalue: '泰州电动汽车电暖流汽车充电站',
				stationIdvalue: '',
				screenAlldata: {},
				myCharts2: null,
				geoCoordMap: {
					台湾: [121.5135, 25.0308],
					黑龙江: [127.9688, 45.368],
					内蒙古: [110.3467, 41.4899],
					吉林: [125.8154, 44.2584],
					北京市: [116.4551, 40.2539],
					辽宁: [123.1238, 42.1216],
					河北: [114.4995, 38.1006],
					天津: [117.4219, 39.4189],
					山西: [112.3352, 37.9413],
					陕西: [109.1162, 34.2004],
					甘肃: [103.5901, 36.3043],
					宁夏: [106.3586, 38.1775],
					青海: [101.4038, 36.8207],
					新疆: [87.9236, 43.5883],
					西藏: [91.11, 29.97],
					四川: [103.9526, 30.7617],
					重庆: [108.384366, 30.439702],
					山东: [117.1582, 36.8701],
					河南: [113.4668, 34.6234],
					江苏: [118.8062, 31.9208],
					安徽: [117.29, 32.0581],
					湖北: [114.3896, 30.6628],
					浙江: [119.5313, 29.8773],
					福建: [119.4543, 25.9222],
					江西: [116.0046, 28.6633],
					湖南: [113.0823, 28.2568],
					贵州: [106.6992, 26.7682],
					云南: [102.9199, 25.4663],
					广东: [113.12244, 23.009505],
					广西: [108.479, 23.1152],
					海南: [110.3893, 19.8516],
					上海: [121.4648, 31.2891],
				},
				chartsData: [
					{name: '北京', value: 199},
					{name: '天津', value: 42},
					{name: '河北', value: 102},
					{name: '山西', value: 81},
					{name: '内蒙古', value: 47},
					{name: '辽宁', value: 67},
					{name: '吉林', value: 82},
					{name: '黑龙江', value: 123},
					{name: '上海', value: 24},
				],
				option: null,
				toopData: [
					{
						name: '总站数',
						num: 198,
					},
					{
						name: '直/交流桩数',
						num: 198,
					},
					{
						name: '累计充电量(万度)',
						num: 198,
					},
					{
						name: '累计充电次数',
						num: 198,
					},
					{
						name: '时长利用率',
						num: 198,
					},
					{
						name: '容量利用率',
						num: 198,
					},
					{
						name: '累计预警次数',
						num: 198,
					},
					{
						name: '今日订单数',
						num: 198,
					},
					{
						name: '今日充电量(度)',
						num: 198,
					},
				],
			};
		},
		created() {
			this.getAllapi();
			let that = this;
			// 图标颜色 要动态加载 push配置
		},
		watch: {
			// 监听路由对象中的变化
			$route: {
				immediate: true, // 启用立即执行
				handler(to, from) {
					// 当路由发生变化时执行的操作
					// console.log('Route changed:', from.path, '->', to.path);
					setTimeout(() => {}, 500);
					// 这里可以根据路由变化执行相关逻辑
				},
			},
		},
		methods: {
			goUrl() {
				// console.log(111111111111111111111,this.stationIdvalue,this.$route,this.$router);
				window.open (window.location.origin+ `/panoramicMonitoring/SiteMonitoringDetails?stationId=${this.stationIdvalue}`);
			},
			dateselect2(params) {
				console.log('dateselect2', params, this.valueCharge);

				getStationAnalysis({date: params, id: this.stationIdvalue, type: '1'}).then((ress) => {
					console.log('stationlefttopalldata', ress);
					this.stationlefttopalldata = ress;
				});
			},
			onSearch() {
				chargeMapsearch({name: this.stationNamevalue}).then((res) => {
					console.log('chargeMapsearch', res);
					this.stationIdvalue = res[0].stationId;
					chargeMapgetStationById({id: res[0].stationId}).then((ress) => {
						console.log('chargeMapgetStationById', ress);
						this.stationlefttopdata = ress;
					});
				});
			},
			initecharts() {
				var that = this;
				this.myCharts2 = this.$echarts.init(document.getElementById('china22'));
				this.$echarts.registerMap('china', {geoJson: chinamap});
				// this.myCharts2.removeAttribute('_echarts_instance_');

				this.myCharts2.setOption(this.option);

				this.myCharts2.on('click', function (params) {
					if (params.seriesType === 'scatter' && params.dataIndex !== undefined) {
						that.stationNamevalue = params.name;
						that.onSearch();

						// that.$router.push({path: '/panoramicMonitoring/ChargingMapDetails'});
						// 执行其他逻辑...
					}
				});
			},
			clickmap() {},
			getAllapi() {
				let that = this;
				getgps().then((res) => {
					this.$nextTick(() => {
						console.log('getAll', res);
						that.chartsData = res.map((item) => ({
							name: item.stationName,
							stationId: item.stationId,
							value: 4,
							data: item,
						}));
						console.log('that.chartsData', that.chartsData);

						that.geoCoordMap = res.reduce((acc, {stationLat, stationLng, stationName}) => {
							acc[stationName] = [stationLng, stationLat];
							return acc;
						}, {});
						that.option = {
							backgroundColor: {
								type: 'linear',
								x: 0,
								y: 0,
								x2: 1,
								y2: 1,
								colorStops: [
									{
										offset: 0,
										color: '#091633', // 0% 处的颜色
									},
									{
										offset: 1,
										color: '#091633', // 100% 处的颜色
									},
								],
								globalCoord: false, // 缺省为 false
							},
							tooltip: {
								trigger: 'item',
								backgroundColor: 'rgb(0,0,0,0.5)', //提示框浮层的背景色
								borderWidth: 0, //提示框浮层的边框宽度
								padding: 0, //提示框浮层的内边距

								formatter: function (params) {
									// console.log('123123params', params);
									// 判断类型 只展示标记的提示窗
									var res = '';
									if (params.componentSubType == 'scatter' && params.seriesType == 'scatter') {
										res = `<div class="toopdiv">
								<p class="toopdivttitle">${params.data.name}</p>
								<div class="toopinlindiv">
							
								</div >
							</div > `;
									} else {
										res = null;
									}

									return res;
								},
							},

							geo: {
								//地图整体位置 地理坐标系组件用于地图的绘制
								map: 'china',
								show: true,
								roam: true, //是否开启鼠标缩放和平移漫游
								left: '25%',
								top: '25%', //地图位置
								zoom: 1.6, //缩放5
								label: {
									//图形上的文本标签，可用于说明图形的一些数据信息
									normal: {
										show: false,
									},
									emphasis: {
										show: false,
									},
								},
								itemStyle: {
									//地图区域的多边形 图形样式。
									normal: {
										areaColor: '#0f2346',
										borderColor: '#0f7ec4', //线
										shadowColor: '#092f8f', //外发光
										shadowBlur: 40,
									},

									// regions  //在地图中对特定的区域配置样式
								},
								emphasis: {
									//鼠标悬浮时
									itemStyle: {
										areaColor: '#D8BC37', //悬浮区背景
										borderColor: '#0f7ec4', //线
										shadowColor: '#092f8f', //外发光
										shadowBlur: 40,
									},
								},
								// select: {
								// 	//鼠标悬浮时
								// 	itemStyle: {
								// 		areaColor: '#D8BC37', //悬浮区背景
								// 	}
								// },
							},

							series: [
								{
									//当前位置点
									symbolSize: 8, //气泡大小
									label: {
										//气泡标签  文字
										normal: {
											formatter: '{b}',
											position: 'right',
											show: false,
											color: 'white',
										},
										emphasis: {
											//高亮
											show: true,
										},
									},
									itemStyle: {
										normal: {
											color: '#fff',
										},
									},
									name: 'light',
									type: 'scatter',
									coordinateSystem: 'geo',
									data: that.convertData(that.chartsData),
									symbolSize: function (val) {
										return val[2] / 10; // 假设每个数据项的第三个元素表示人口数量，用于调整点的大小
									},
								},
								{
									type: 'map',
									name: 'china',
									map: 'china',
									zoom: 15,
									left: '10',
									// center: [115.97, '30%'],//地图中心点
									geoIndex: 0, //地图类型
									showLegendSymbol: false, // 存在legend时显示
									label: {
										normal: {
											show: false,
										},
										emphasis: {
											show: false,
											textStyle: {
												color: '#fff',
											},
										},
									},
									roam: true, //是否开启鼠标缩放和平移漫游

									animation: true,
									data: that.chartsData,
								},
								{
									// 悬浮气泡内的文字
									name: 'Top 5',
									type: 'scatter', //

									coordinateSystem: 'geo',
									symbol: 'pin',
									symbolSize: [25, 25],
									label: {
										normal: {
											show: false,
											textStyle: {
												color: '#fff',
												fontSize: 9,
											},
											formatter(value) {
												return value.data.value[2];
											},
										},
									},
									data: that.convertData(that.chartsData),
									showEffectOn: 'render',
									rippleEffect: {
										brushType: 'stroke',
									},
									hoverAnimation: true,
									// zlevel: 1,
								},
							],

							
						};
						setTimeout(() => {
							that.initecharts();
						}, 2000);
					});
				});
			},

			convertData(params) {
				var res = [];
				console.log(' this.chartsData222222', this.chartsData);
				for (var i = 0; i < this.chartsData.length; i++) {
					var geoCoord = this.geoCoordMap[this.chartsData[i].name];
					if (geoCoord) {
						res.push({
							name: this.chartsData[i].name,
							value: geoCoord.concat(this.chartsData[i].value),
							stationId: this.chartsData[i].stationId,
						});
					}
				}
				return res;
			},
		},
		mounted() {},
	};
</script>
<style lang="less">
	.botdiv {
		position: absolute;
		bottom: 10px;
		margin-left: -30vw;
		left: 50%;
	}
	.p1 {
		margin-bottom: 5px !important;
	}
	#china22 {
		width: 100%;
		height: 100vh;
		// position: relative;
	}

	.toopdiv,
	.toopdiv1 {
		color: #1484ec;
		font-size: 14px;
		border: 1px solid #3f96aa;
		box-sizing: border-box;
		padding: 7px;

		.toopdivttitle {
			font-size: 18px;
			font-weight: 700;
			border-bottom: 1px solid #3f96aa;
			margin-bottom: 10px;
		}

		.cicle {
			display: inline-block;
			width: 5px;
			height: 5px;
			border-radius: 50%;
			margin-right: 5px;
			background-color: #1484ec;
		}

		.toopinlindiv p {
			margin-bottom: 3px;
			display: flex;
			align-items: center;
			flex-wrap: nowrap;
			white-space: nowrap;
		}
	}

	.toopdiv1 {
		position: absolute;
		top: 0px;
		left: 0px;
	}
	.left_float {
		position: absolute;
		left: 5%;
		top: 5%;
		width: 300px;
		font-size: 16px;

		.seletDetails {
			background: white;
			padding: 10px;
			box-sizing: border-box;
			width: 360px;
			// height: 290px;
			border-radius: 5px;
			margin-top: 10px;

			.seletDetails2 {
				margin-top: 10px;
				display: flex;
				justify-content: space-between;
				align-items: center;

				p {
					margin-bottom: 0px;
				}

				img {
					width: 30px;
					height: 30px;
				}

				.details22p2 {
					color: #1890ff;
					text-align: center;
				}

				.details22p3 {
					color: red;
				}
			}
		}
	}
</style>
